import { useContext, useEffect, useRef } from "react";
import { echaresContext } from "../../context/index";
import ApiClient from "../../axios/index";
import "./index.less";
import { EChartsType } from "echarts";
import china from "../../json/china.json";
import { getProvinceMapInfo } from "../../utils/map_utils";
const Map = () => {
  const context = useContext(echaresContext);
  const trendRef = useRef<HTMLDivElement>(null);
  const allData = useRef(null);
  const echarts = useRef<EChartsType | null>(null);
  // 初始化
  const initEcharts = () => {
    echarts.current = context.init(trendRef.current, "dark");
    echarts.current.on("click", (params) => {
      getProvinceMapInfo(params.name).then((res) => {
        context.registerMap(res.name, res.data);
        const option = {
          geo: {
            map: res.name,
          },
        };
        echarts.current && echarts.current.setOption(option);
      });
    });
    context.registerMap("china", china);
    const option = {
      title: {
        text: "商家分布图",
        left: "center",
      },
      geo: {
        type: "map",
        map: "china",
        itemStyle: {
          areaColor: "#2E72BF",
          borderColor: "#333",
        },
        emphasis: {
          itemStyle: {
            areaColor: "#2E72BF",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
      legend: {
        orient: "vertical",
        left: "left",
        bottom: "5%",
        textStyle: {
          color: "#fff",
          fontSize: 12,
        },
      },
    };
    echarts.current && echarts.current.setOption(option);
  };
  // 更新数据
  const updateEcharts = () => {
    // const mouth = allData.current && allData.current.common.month;
    const seriesArr =
      allData.current &&
      allData.current.map((item) => {
        return {
          name: item.name,
          type: "effectScatter",
          data: item.children,
          coordinateSystem: "geo",
        };
      });
    const option = {
      series: seriesArr,
      // legend: {
      //   data: seriesArr!.map((item) => item.name),
      // },
    };
    // 更新数据
    echarts.current && echarts.current.setOption(option);
  };
  // 屏幕大小改变
  const screenResize = () => {
    const fontSize = (trendRef.current?.offsetWidth / 100) * 3.6;
    const option = {
      legend: {
        itemWidth: fontSize,
        itemHeight: fontSize,
        itemGap: fontSize,
        textStyle: {
          fontSize: fontSize / 2,
        },
      },
    };
    echarts.current && echarts.current.setOption(option);
  };
  // 获取数据
  const getData = () => {
    const apiClient = new ApiClient();
    apiClient.get("/map").then((res) => {
      allData.current = res.data;
      updateEcharts();
    });
    // 获取数据
  };
  //
  const handleBackChina = () => {
    initEcharts();
  };
  useEffect(() => {
    initEcharts();
    getData();
    window.addEventListener("resize", screenResize);
    screenResize();
    return () => {
      window.removeEventListener("resize", screenResize);
    };
  }, []);
  return (
    <div
      className="trend-container"
      ref={trendRef}
      onDoubleClick={handleBackChina}
    ></div>
  );
};
export default Map;
